<template>
  <view class="calendar-page">
    <view class="header">
      <text class="title">打卡日历</text>
    </view>

    <view class="calendar">
      <view class="calendar-header">
        <text class="month-year">{{ currentMonthYear }}</text>
      </view>

      <view class="weekdays">
        <text v-for="day in weekDays" :key="day" class="weekday">{{ day }}</text>
      </view>

      <view class="days">
        <view v-for="(day, index) in days" :key="index"
              class="day"
              :class="{ 'completed': isCompleted(day), 'empty': !day }">
          <text>{{ day }}</text>
          <view v-if="isCompleted(day)" class="completed-mark">✓</view>
        </view>
      </view>
    </view>

    <view class="statistics">
      <view class="stat-item">
        <text class="stat-label">本月完成</text>
        <text class="stat-value">{{ completedDays.length }}天</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">连续打卡</text>
        <text class="stat-value">{{ streak }}天</text>
      </view>
    </view>
  </view>
</template>

<script>
import {api} from "@/utils/request"

export default {
  data() {
    return {
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      days: [],
      currentDate: new Date(),
      completedDays: [], // 已完成的日期数组
      streak: 0 // 连续打卡天数
    }
  },
  computed: {
    currentMonthYear() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth() + 1
      return `${year}年${month}月`
    }
  },
  methods: {
    generateCalendar() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()

      // 获取当月第一天
      const firstDay = new Date(year, month, 1)
      // 获取当月最后一天
      const lastDay = new Date(year, month + 1, 0)

      // 填充日历数组
      this.days = []

      // 填充上月剩余日期
      for (let i = 0; i < firstDay.getDay(); i++) {
        this.days.push('')
      }

      // 填充当月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        this.days.push(i)
      }
    },
    isCompleted(day) {
      if (!day) return false
      const dateStr = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth() + 1}-${day}`
      return this.completedDays.includes(dateStr)
    },
    async loadCompletedDays() {
      // 从本地存储加载已完成的日期
      const res = await api.getDailyTaskByMonth()
      if (res.code == 200) {
        this.completedDays = res.result.dates
      }
      this.calculateStreak()
    },
    calculateStreak() {
      let streak = 0
      const today = new Date()
      today.setHours(0, 0, 0, 0)

      for (let i = 0; i < 100; i++) { // 最多查找100天
        const checkDate = new Date(today)
        checkDate.setDate(today.getDate() - i)
        const dateStr = `${checkDate.getFullYear()}-${checkDate.getMonth() + 1}-${checkDate.getDate()}`

        if (this.completedDays.includes(dateStr)) {
          streak++
        } else {
          break
        }
      }

      this.streak = streak
    },

  },
  onLoad() {
    this.generateCalendar()
    this.loadCompletedDays()
  }
}
</script>

<style lang="scss">
.calendar-page {
  padding: 40rpx;
  background-image: linear-gradient(to bottom, #f8e5d7, #a8e6e2);
  position: fixed;
  height: 100%;

  .header {
    padding: 20rpx 0;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .calendar {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

    .calendar-header {
      text-align: center;
      padding: 20rpx 0;

      .month-year {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .weekdays {
      display: flex;
      justify-content: space-around;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;

      .weekday {
        width: 14.28%;
        text-align: center;
        font-size: 28rpx;
        color: #666;
      }
    }

    .days {
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;

      .day {
        width: 14.28%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &.completed {
          color: #07c160;
          font-weight: bold;
        }

        &.empty {
          pointer-events: none;
        }

        .completed-mark {
          position: absolute;
          bottom: 5rpx;
          font-size: 20rpx;
          color: #07c160;
        }
      }
    }
  }

  .statistics {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-label {
        font-size: 28rpx;
        color: #666;
      }

      .stat-value {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        color: #07c160;
        margin-top: 10rpx;
      }
    }
  }
}
</style> 